import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Tabs, Alert, Select,Input} from 'antd';
import { connect } from 'dva';
import styles from './index.less';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const Option = Select.Option;
@Form.create()
class RefundModalComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabKey: '1',
            transferTypes: []
        }
    }
    componentWillMount() {
      window.Isoption = false;
    }

    componentDidMount() {
      window.Isoption = true;
        this.getTransferTypes()
    }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    getTransferTypes =()=> {
        const { dispatch } = this.props;
        dispatch({
            type: 'recordList/GetTransferTypes',
            payload: {
                rd: Math.floor(Math.random()*10)
            },
            callBack: {
                success: res=> {
                    if(res.Code===0) {
                        this.setState({
                            transferTypes: res.Data?res.Data:[]
                        })
                    }
                }
            }
        })
    }

    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        const {tabKey} = this.state;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                if(tabKey==='1') { //微信
                    dispatch({
                        type: 'recordList/GrantRefundBack',
                        payload: {
                            id: this.props.param.Id
                        },
                        callBack: {
                            success: res => {
                                if(res.Code===0) {
                                    message.success('提交成功');
                                    this.props.ok();
                                }
                            },
                            error: res => {
                                message.error(res.Msg)
                            }
                        }
                    })
                }
                if(tabKey==='2') {
                    dispatch({
                        type: 'recordList/TabRefundRecord',
                        payload: {
                            id: this.props.param.Id,
                            accountName: values.accountName?values.accountName:'', //收款人
                            transferType: values.transferType?values.transferType:'', //收款方式
                            tradeId: values.tradeId?values.tradeId:'', //	流水号
                            accountInfo: values.accountInfo?values.accountInfo:'' //收款帐号
                        },
                        callBack: {
                            success: res => {
                                if(res.Code===0) {
                                    message.success('提交成功');
                                    this.props.ok();
                                }
                            },
                            error: res => {
                                message.error(res.Msg)
                            }
                        }
                    })
                }
            }
        })
    }

    selectHandleChange =(value)=> {
        console.log(value)
    }

    clickTabs=(key)=> {
        this.setState({
            tabKey: key
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const {loading1, loading2} = this.props;
        const {transferTypes} = this.state;
        const formItemLayout = {
            labelCol: {
                span: 5,
              },
              wrapperCol: {
                span: 8,
              },
          }
        return (
            <Form onSubmit={this.handleSubmit}>
                <Tabs onChange={this.clickTabs} type="card" style={{padding: 24, paddingBottom: 0}}>
                    <TabPane tab="原路退回" key="1">
                        <FormItem {...formItemLayout} label="收款方式">微信支付</FormItem>
                    </TabPane>
                    <TabPane tab="标记退款" key="2">
                    <Alert
                        message="标记退款后，维权单将标记为已退款状态；请确认已通过其他方式退款后再进行操作，系统将只做记录，不处理退款流程。"
                        type="warning"
                        showIcon
                        style={{marginBottom: 16}}
                    />
                    <FormItem
                        {...formItemLayout}
                        label="转账方式"
                    >
                        {getFieldDecorator('transferType',{
                            rules: [{required: false, message: '此项为必选项'}]
                        })(
                            <Select
                                mode="tags"
                                onChange={this.selectHandleChange}
                                maxTagCount={1}
                                maxTagPlaceholder=" "
                            >
                                {
                                    transferTypes.map((item, index)=> {
                                        return (
                                            <Option key={index}>{item}</Option>
                                        )
                                    })
                                }
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="收款人姓名"
                    >
                        {getFieldDecorator('accountName',{
                            rules: [{required: false, message: '此项为必选项'}]
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="收款人账户"
                    >
                        {getFieldDecorator('accountInfo',{
                            rules: [{required: false, message: '此项为必选项'}]
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="支付流水号"
                    >
                        {getFieldDecorator('tradeId',{
                            rules: [{required: false, message: '此项为必选项'}]
                        })(
                            <Input />
                        )}
                    </FormItem>
                    </TabPane>
                </Tabs>

                <FormItem className="xkd-model-footBtn">
                    <Button onClick={this.handleCancel} className="xkd-mr8">
                        取消
                    </Button>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading1||loading2}
                    >
                        确认
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const RefundModal = createModalContainer(
    connect(({recordList, global, loading}) =>({
        recordList,
        loading1: loading.effects['recordList/TabRefundRecord'],
        loading2: loading.effects['recordList/GrantRefundBack'],
    }))(RefundModalComponent),
    true,
    true
);

export default RefundModal;
